<template>

    <div ref="MapView" style="height:100%">
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
        </div>

        <div class="PlatformMenu" style="position:absolute;left:200px;top:200px;">
            <div class="PlatformMenuItem Tag">
                啦啦啦
            </div>
            <div class="PlatformMenuItem">
                <div class="PlatformMenuName">Test</div>
                <div class="PlatformMenuChildren">
                    <div class="PlatformMenuItem">
                        <div class="PlatformMenuName">TestTest</div>
                        <div class="PlatformMenuChildren">
                            <div class="PlatformMenuItem">
                                <div class="PlatformMenuName">Test</div>
                            </div>
                            <div class="PlatformMenuItem">
                                <div class="PlatformMenuName">TestTestTest</div>
                            </div>
                            <div class="PlatformMenuItem">
                                <div class="PlatformMenuName">TestTest</div>
                            </div>
                        </div>
                    </div>
                    <div class="PlatformMenuItem">
                        <div class="PlatformMenuName">TestTest</div>
                        <div class="PlatformMenuChildren">
                            <div class="PlatformMenuItem">
                                <div class="PlatformMenuName">Test</div>
                            </div>
                            <div class="PlatformMenuItem">
                                <div class="PlatformMenuName">TestTestTest</div>
                            </div>
                            <div class="PlatformMenuItem">
                                <div class="PlatformMenuName">TestTest</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="PlatformMenuItem Division"></div>
            <div class="PlatformMenuItem">
                <div class="PlatformMenuName">TestTest</div>
                <div class="PlatformMenuChildren">
                    <div class="PlatformMenuItem">
                        <div class="PlatformMenuName">Test</div>
                        <div class="PlatformMenuChildren">
                            <div class="PlatformMenuItem">
                                <div class="PlatformMenuName">TestTestTest</div>
                            </div>
                            <div class="PlatformMenuItem">
                                <div class="PlatformMenuName">TestTest</div>
                            </div>
                            <div class="PlatformMenuItem">
                                <div class="PlatformMenuName">Test</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import simpleMap from '../../components/simpleMap'
// import CesiumNavigation from '../../../public/libs/Cesium/CesiumNavigation.umd.js'

import CesiumNavigation from "cesium-navigation-es6";

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
let lastSelectItem = null;

let _Platform = null;
let _Link = null;
let _Arrow = null;

let _Platform_SetInterval = null;
let _Radar = null;
let _Satellite = null;
// 随机函数
function randomNum(min, max) {
    return parseFloat(Math.random() * (max - min + 1) + min, 10);
}


class Menu {
    constructor(options) { }

    setChild() { }
    show(position, options) {
        var dom = document.createElement('div');
        dom.className = 'PlatformMenu';
        for (let i = 0; i < options.length; i++) {
            const element = options[i];
            if (element.type == 'division') {
                var itemDom = document.createElement('div');
                itemDom.className = 'PlatformMenuItem Division';
            } if (element.type == 'tag') {
                var itemDom = document.createElement('div');
                itemDom.className = 'PlatformMenuItem Tag';
                itemDom.innerHTML = element.name
            } else {
                var itemDom = document.createElement('div');
                itemDom.className = 'PlatformMenuItem';
                itemDom.innerHTML = element.name;

                // hasChild =
                itemDom.onmouseenter = () => {
                    element.HoverEvent(element).then(res => {
                        this.setChild(res);
                    })
                }
                itemDom.onclick = function () {

                }
            }
        }
    }
    hide() { }
}



export default {
    data() {
        return {
            SenceMode: '2D'
        }
    },
    watch: {

    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, {
            mapOptions: {
                animation: false, // 关闭默认动画事件
                senceMode: "2D", // 初始化时，以2D模式进行渲染
            },
        });
        map.addProviders(mapConfig);
        map.flytochina();

        var viewer = map.getViewer();
        viewer.scene.primitives.add(new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: new Cesium.PolylineGeometry({
                    positions: [simpleMap.util.CreatePosition({ longitude: 115.0, latitude: 37.0 }), simpleMap.util.CreatePosition({ longitude: 100, latitude: 38 })],
                    width: 10.0,
                    vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
                    colors: [Cesium.Color.fromRandom({ alpha: 1.0 }), Cesium.Color.fromRandom({ alpha: 1.0 })],
                    colorsPerVertex: true
                })
            }),
            appearance: new Cesium.PolylineColorAppearance()
        }));


        // const polyline = new Cesium.PolylineGeometry({
        //     positions: positions,
        //     width: 10.0,
        //     vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
        //     colors: colors,
        //     colorsPerVertex: true
        // });
        // const geometry = Cesium.PolylineGeometry.createGeometry(polyline);

        // viewer.entities.add({
        //     polyline: geometry
        // })
        // ————————————————
        //         版权声明：本文为CSDN博主「西北码农」的原创文章，遵循CC 4.0 BY - SA版权协议，转载请附上原文出处链接及本声明。
        //         原文链接：https://blog.csdn.net/bitree1/article/details/120874149

        // var viewer = map.getViewer();

        // viewer.entities.add({
        //     polygon: {
        //         width: 10,
        //         positions: [Cesium.Cartesian3.fromDegrees(115.0, 37.0), Cesium.Cartesian3.fromDegrees(100.0, 38.0)],
        //         colors: [Cesium.Color.fromRandom({ alpha: 1 }), Cesium.Color.fromRandom({ alpha: 1 })],
        //         vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
        //         colorsPerVertex: true
        //     }
        // })
        // entities.add({undefined

        // id: 'line',

        // show: true, //显示

        // polyline: {undefined

        // positions: Cesium.Cartesian3.fromDegreesArray(linePoint),

        // width: 1, //线条粗细

        // followSurface: false, //取消弯曲

        // material: Cesium.Color.YELLOW, //线条材质

        // clampToGround: true

        // },
        // ————————————————
        // 版权声明：本文为CSDN博主「要努力的子健」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
        // 原文链接：https://blog.csdn.net/weixin_35224206/article/details/112920785

        var options = {};

        // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
        options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
        // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
        options.enableCompass = true;
        // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
        options.enableZoomControls = true;
        // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
        options.enableDistanceLegend = true;
        // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
        options.enableCompassOuterRing = true;

        //配置项
        // let _options = { enableCompass: true, enableZoomControls: false, enableCompassOuterRing: true, enableDistanceLegend: false };


        var viewer = map.getViewer();
        //添加罗盘
        new CesiumNavigation(viewer, options);



        // // 创建业务图层
        // _Platform = new simpleMap.PlatformDataSource(map, {
        //     defaultNameStatus: false,
        //     anime: true,
        //     Click: true,
        //     RightClick: true,
        //     DBLClick: true,
        //     MultiClick: true,
        //     MultiRightClick: true,
        //     MultiDBLClick: true,
        // });

        // // 随机生成点位集合
        // var _array = [];
        // for (let i = 0; i < 50; i++) {
        //     var _color = window.anime.random(0, 1) ? 'BLUE' : 'RED';
        //     _array.push({
        //         id: 'P' + i,
        //         longitude: randomNum(80, 120),
        //         latitude: randomNum(25, 45),
        //         height: randomNum(0, 1000000),
        //         radius: randomNum(0, 200000),
        //         rotation: randomNum(0, 360),
        //         color: _color,
        //         selectColor: _color,
        //         imageUrl: './image/plane.png',
        //         name: {
        //             text: 'p' + i,
        //             color: 'WHITE',
        //             background: _color,
        //         },
        //     });
        // }


        // // 添加多个平台对象
        // _Platform.Adds(_array);
        // // 平台绑定属性事件
        // _Platform.on('MultiDBLClick', (item) => {
        //     console.log(item);
        // });


        // var MenuOptions = {
        //     list: [],
        //     ClickEvent: function (data) {

        //     },
        //     HoverEvent: function (data) {

        //     }
        // };



        // const viewer = new Cesium.Viewer(this.$refs.MapView);

        // const options = {
        //     camera: viewer.scene.camera,
        //     canvas: viewer.scene.canvas,
        // };
        // const dataSourcePromise = viewer.dataSources.add(
        //     Cesium.KmlDataSource.load(
        //         "https://sandcastle.cesium.com/SampleData/kml/facilities/facilities.kml",
        //         options
        //     )
        // );
        // dataSourcePromise.then(function (dataSource) {
        //     const pixelRange = 15;
        //     const minimumClusterSize = 3;
        //     const enabled = true;

        //     dataSource.clustering.enabled = enabled;
        //     dataSource.clustering.pixelRange = pixelRange;
        //     dataSource.clustering.minimumClusterSize = minimumClusterSize;

        //     let removeListener;

        //     const pinBuilder = new Cesium.PinBuilder();
        //     const pin50 = pinBuilder
        //         .fromText("50+", Cesium.Color.RED, 48)
        //         .toDataURL();
        //     const pin40 = pinBuilder
        //         .fromText("40+", Cesium.Color.ORANGE, 48)
        //         .toDataURL();
        //     const pin30 = pinBuilder
        //         .fromText("30+", Cesium.Color.YELLOW, 48)
        //         .toDataURL();
        //     const pin20 = pinBuilder
        //         .fromText("20+", Cesium.Color.GREEN, 48)
        //         .toDataURL();
        //     const pin10 = pinBuilder
        //         .fromText("10+", Cesium.Color.BLUE, 48)
        //         .toDataURL();

        //     const singleDigitPins = new Array(8);
        //     for (let i = 0; i < singleDigitPins.length; ++i) {
        //         singleDigitPins[i] = pinBuilder
        //             .fromText("" + (i + 2), Cesium.Color.VIOLET, 48)
        //             .toDataURL();
        //     }

        //     function customStyle() {
        //         if (Cesium.defined(removeListener)) {
        //             removeListener();
        //             removeListener = undefined;
        //         } else {
        //             removeListener = dataSource.clustering.clusterEvent.addEventListener(
        //                 function (clusteredEntities, cluster) {
        //                     console.log(clusteredEntities, cluster);
        //                     cluster.label.show = false;
        //                     cluster.billboard.show = true;
        //                     cluster.billboard.id = cluster.label.id;
        //                     cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

        //                     if (clusteredEntities.length >= 50) {
        //                         cluster.billboard.image = pin50;
        //                     } else if (clusteredEntities.length >= 40) {
        //                         cluster.billboard.image = pin40;
        //                     } else if (clusteredEntities.length >= 30) {
        //                         cluster.billboard.image = pin30;
        //                     } else if (clusteredEntities.length >= 20) {
        //                         cluster.billboard.image = pin20;
        //                     } else if (clusteredEntities.length >= 10) {
        //                         cluster.billboard.image = pin10;
        //                     } else {
        //                         cluster.billboard.image =
        //                             singleDigitPins[clusteredEntities.length - 2];
        //                     }
        //                 }
        //             );
        //         }

        //         // force a re-cluster with the new styling
        //         const pixelRange = dataSource.clustering.pixelRange;
        //         dataSource.clustering.pixelRange = 0;
        //         dataSource.clustering.pixelRange = pixelRange;
        //     }

        //     // start with custom style
        //     customStyle();

        //     const viewModel = {
        //         pixelRange: pixelRange,
        //         minimumClusterSize: minimumClusterSize,
        //     };
        //     Cesium.knockout.track(viewModel);

        //     const toolbar = document.getElementById("toolbar");
        //     Cesium.knockout.applyBindings(viewModel, toolbar);

        //     function subscribeParameter(name) {
        //         Cesium.knockout
        //             .getObservable(viewModel, name)
        //             .subscribe(function (newValue) {
        //                 dataSource.clustering[name] = newValue;
        //             });
        //     }

        //     subscribeParameter("pixelRange");
        //     subscribeParameter("minimumClusterSize");

        //     Sandcastle.addToggleButton("Enabled", true, function (checked) {
        //         dataSource.clustering.enabled = checked;
        //     });

        //     Sandcastle.addToggleButton("Custom Styling", true, function (
        //         checked
        //     ) {
        //         customStyle();
        //     });

        //     const handler = new Cesium.ScreenSpaceEventHandler(
        //         viewer.scene.canvas
        //     );
        //     handler.setInputAction(function (movement) {
        //         const pickedLabel = viewer.scene.pick(movement.position);
        //         if (Cesium.defined(pickedLabel)) {
        //             const ids = pickedLabel.id;
        //             if (Array.isArray(ids)) {
        //                 for (let i = 0; i < ids.length; ++i) {
        //                     ids[i].billboard.color = Cesium.Color.RED;
        //                 }
        //             }
        //         }
        //     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        // });
    },
    methods: {
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        },
    },
}
</script>

<style>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}

.PlatformMenu {
    color: #ccc;
    padding: 3px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    user-select: none;
    z-index: 20;
}
.PlatformMenuItem {
    position: relative;
}
.PlatformMenuItem.Tag {
    font-size: 12px;
    color: #999;
    padding: 0 10px;
}
.PlatformMenuItem.Division {
    padding: 3px 0 4px 0;
}
.PlatformMenuItem.Division::after {
    content: "";
    border-bottom: 1px solid #999;
    width: 100%;
    display: block;
}

.PlatformMenuChildren {
    padding: 3px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
}

.PlatformMenuItem:hover > .PlatformMenuChildren {
    display: block;
}

.PlatformMenuName {
    padding: 5px 15px;
    cursor: pointer;
    padding-right: 30px;
}

.PlatformMenuName::after {
    position: absolute;
    right: 10px;
    top: 12px;
    float: right;
    width: 7px;
    height: 7px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    display: block;
    content: "";
    transform: rotateZ(45deg);
    margin: 0 0 0 10px;
}
.PlatformMenuName:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
</style>